<template>
  <div class="JJLogin">
    <el-card class="BoxCard" shadow="never">
      <!-- Banner -->
      <div class="LoginBanner">
        <i class="el-icon-ship" style="margin-right: var(--u-gap)"></i><span class="primaryLetter">L</span>ogin
        <span class="strongerLetter">JOJO</span>.
      </div>

      <!-- Form -->
      <el-form class="LoginForm" ref="loginFormRef" :model="loginForm" size="medium" label-position="top">
        <el-form-item label="Email" prop="email" :rules="[{ required: true, message: 'Please input email', trigger: 'blur' }]">
          <el-input v-model="loginForm.email"></el-input>
        </el-form-item>

        <el-form-item
          label="Password"
          prop="email"
          :rules="{
            required: true,
            message: 'Please input password',
            trigger: 'blur'
          }"
        >
          <el-input v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
      </el-form>

      <div class="CardOptions">
        <el-button type="primary" size="small" @click="loginHandle" :loading="isLoading">Login</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import storage from '../utils/storage'

// API
import { userLoginAPI } from '../api/modules/user'

export default defineComponent({
  name: 'JJLogin',
  data() {
    return {
      isLoading: false,
      loginForm: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    loginHandle: function () {
      this.$refs['loginFormRef'].validate(async (valid) => {
        if (valid) {
          this.isLoading = true

          const { succeed, data } = await userLoginAPI({ email: this.loginForm.email, password: this.loginForm.password })

          if (succeed) {
            storage.set('token', data.token)
            storage.set('user', data.user)

            this.$message({
              message: 'Login succeeded, redirecting...',
              type: 'success'
            })

            this.$router.push({ name: 'home' })
          }

          this.isLoading = false
        } else {
          return false
        }
      })
    }
  }
})
</script>

<style lang="scss">
.JJLogin {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 10rem;
  height: 100lvh;

  .BoxCard {
    width: 400px;
    height: fit-content;
    border-radius: 0;

    .LoginBanner {
      margin-bottom: calc(var(--u-gap) * 3);
      font-size: 1.6rem;

      .primaryLetter {
        color: var(--c-blue);
      }

      .strongerLetter {
        font-size: 1.5rem;
        font-family: var(--f-rb);
      }
    }

    .LoginForm {
      .el-form-item__label {
        line-height: 100%;
        font-family: var(--f-rb);
        color: var(--c-text-2);
      }

      .el-input__inner {
        border-radius: 0;
      }
    }

    .CardOptions {
      margin-top: calc(var(--u-gap) * 3);

      .el-button {
        border-radius: 0;
      }
    }
  }
}
</style>
